<template>
  <div class="login-wrap">
    <div class="login-contain">
      <div class="login-header">
        <p></p>
      </div>
      <div class="form-group">
        <div class="form-item">
          <label for="username">
            <img src="../assets/loginImg/user.png" />
          </label>
          <input id="username" maxlength="14" type="text" placeholder="请输入用户名" v-model="username" @input="user"/>
          <img :src="isok==true?yes:err" alt="" v-show="img">
        </div>
        <div class="form-item">
          <label for="password">
            <img src="../assets/loginImg/password.png" alt="" />
          </label>
          <input id="password"  maxlength="14" type="password" placeholder="请输入密码"  v-model="password" @input="pass"/>
          <img :src="isok2==true?yes:err" alt="" v-show="img2">
        </div>
      </div>
      <div class="button-group">
        <button class="login-btn" id="doLogin" @click="doLogin()">登录</button>
      </div>

      <div class="order-login">
        <p class="order-login-line">其他登录方式</p>
        <div class="order-login-box">
          <div class="display">
            <a @click="phoneLoging()">
              <img
                src="../assets/loginImg/iphone3.png"
                alt=""
                style="width: 45px; height: 45px"
              />
              <p>手机登录</p>
            </a>
            <a @click="emailLoging()">
              <img
                src="../assets/loginImg/email3.png"
                alt=""
                style="width: 45px; height: 45px"
              />
              <p>邮箱登录</p>
            </a>
            
          </div>
        </div>
      </div>
    <p class="register-go"><span @click="goRegis">去注册</span><img src="../assets/loginImg/right.png" alt=""></p>

    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "WorkspaceJsonLogin",

  data() {
    return {
      img:false,
      img2:false,
      username:'',
      password:'',
      isok:false,
      isok2:false,
      yes:require('../assets/loginImg/yes.png'),
      err:require('../assets/loginImg/err.png'),
    };
  },

  mounted() {},

  methods: {
    // 表单验证
    user() {
      this.img = true
      let userReg = new RegExp("^[\u4e00-\u9fa5A-Za-z0-9]{5,14}$");
      if (this.username == "") {
        this.isok = false
      } else if (userReg.test(this.username)) {
        this.isok = true
      } else {
         this.isok = false
      }
    },
    pass(){
      this.img2 = true
      let userReg = new RegExp("^[A-Za-z0-9]{6,14}$");
      if (this.password == "") {
        this.isok2 = false
      } else if (userReg.test(this.password)) {
        this.isok2 = true
      } else {
        this.isok2 = false
      }
    },
    // 按钮跳转
    phoneLoging(){
      this.$router.push('/phoneLogin')
    },
    emailLoging(){
      this.$router.push('/emailLogin')
    },
    goRegis(){
      this.$router.push('/register')
    },
    // 登录
    doLogin(){
      if(this.isok==true && this.isok2==true){
        this.$http.post('/loginApp',{
          uname:this.username,
          password:this.password
        }).then(res=>{
          console.log(res);
          if(res.data.code==200){
            // 用户名加密存储
            let encodedData = window.btoa(window.encodeURIComponent(this.username));
            sessionStorage.setItem('cookie-session',encodedData)
            Toast.success('登录成功');
            this.$router.replace('/me')
          }else{
            Toast.fail('用户名或密码错误');
          }
        }).catch(err=>{
          Toast.fail('未知错误，请稍后重试');
        })
      }else{
        Toast.fail('请完成表单的验证');
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.login-wrap{
    background: url('../assets/loginImg/bac-bg.jpg') no-repeat;
    background-size:cover ;

    /* background: linear-gradient(rgba(248, 248, 248,0.1), rgba(248, 248, 248,0.1)), url('../assets/loginImg/bac-bg.jpg') no-repeat; */
}

a, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}

.login-contain {
    margin: 0!important;
    width: 100%;
    min-height: 800px;
}
.login-header {
    padding: 5%;
}
.login-header p {
    margin: 150px 0;
    font-size: 32px;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0.1em 0.15em 0.1em #55a6ad
}
.login-logo {
    padding: 5%;
}
.login-logo img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}
.login-logo p {
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2px;
    margin-top: 2%;
}
.form-group {
    padding: 5%;
}
.form-group .form-item {
    margin-top: 5%;
    padding:0 10px;
    border-radius: 20px;
    background-color: rgba(59, 208, 245, 0.5);
    display: flex;
    justify-content: flex-start;
    >img{
      margin:10px 0 0 15px;
      width: 25px;
      height: 25px;
    }
}
.form-group .form-item input {
    outline: none;
    border: 0;
    background-color: transparent;
    color: #000000;
    height: 40px;
    font-size: 18px;
    width: 70%;
    margin-left: 12%;
}
.form-group .form-item input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #ffffff;
    font-size: 16px;
}
.form-group .form-item input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
    font-size: 16px;
}
.form-group .form-item input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ffffff;
    font-size: 16px;
}
.form-group .form-item input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #ffffff;
    font-size: 16px;
}
.form-group .form-item label img {
    width: 25px;
    position: absolute;
    margin-top: 5px;
}
.form-group .form-item button {
    outline: none;
    background: transparent;
    border: 1px #00cc99 dashed;
    color: #ffffff;
    height: 30px;
    border-radius: 5px;
    float: right;
    padding: 1%;
}
.button-group {
    padding: 5%;
}
.button-group button {
    outline: none;
    border: 0;
    width: 90%;
    height: 40px;
    margin-top: 4%;
    border-radius: 20px;
    margin-left: 4%;
    color: #ffffff;
    font-size: 18px;
}
.button-group .login-btn {
    background-color: #ffffff;
    color: #74C3CA;
}

.order-login {
    padding: 5%;
}
.order-login-line {
    display: block;
    position: relative;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}
.order-login-line:before,
.order-login-line:after {
    content: '';
    position: absolute;
    top: 50%;
    background: #ffffff;
    width: 20%;
    height: 1px;
}
.order-login-line:before {
    left: 10%;
}
.order-login-line:after {
    right: 10%;
}
.order-login-box {
    display: flex;
    width: 100%;
    justify-content:center;
    margin-top: 20px;
}
.order-login-box div{
    flex: 1;
    text-align: center;
}
.order-login-box div p{
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    
}
.display{
    a{
        margin: 0 30px;
    }
    display: flex;
    justify-content: center;

}
.register-go{
  position: fixed;
  top: 30px;
  right:5px;
  display: flex;
  justify-content: center;
  align-items: center;
  >img{
    width: 30px;
  }
  >span{
    font-size: 18px;
    color: rgb(255, 255, 255);
    font-weight: bold;
  }
}

</style>